import React from 'react'
import {WhiteSpace, WingBlank} from "antd-mobile";
import TeamIconTitle from "../../../../../../shared-components/PlayerList/TeamIconTitle/TeamIconTitle";

const renderRank = (team, rank) => {

    // against: 67
    // away_goals: 22
    // diff: -22
    // drawn: 6
    // goals: 45
    // lost: 20
    // played: 37
    // position: 16
    // pts: 39
    // team_id: 13075
    // won: 11
    if (!rank) return null
    const {
        played,
        won,
        lost,
        goals,
        against,
        diff,
        position,
        pts,
    } = rank

    return <>
        <div style={{
            background: 'rgba(248,248,248, 0.5)',
            padding: '8px',
        }}>
            <TeamIconTitle
                team={team}
                style={{justifyContent: 'flex-start',}}
            />
            <div className='flex-align-center'>
                <div style={{flex: '1',}}/>
                <div className='flex-space-between-align-center' style={{flex: '1',}}>
                    <span style={{flex: '1', textAlign: 'center',}}>赛</span>
                    <span style={{flex: '1', textAlign: 'center',}}>胜</span>
                    <span style={{flex: '1', textAlign: 'center',}}>平</span>
                    <span style={{flex: '1', textAlign: 'center',}}>负</span>
                    <span style={{flex: '2', textAlign: 'center',}}>进/失</span>
                    <span style={{flex: '2', textAlign: 'center',}}>净胜</span>
                </div>
            </div>
            <WhiteSpace />
            <div className='flex-align-center'>
                <div style={{flex: '1',}}>
                    <span style={{marginRight: '16px',}}>
                        排名：{position}
                    </span>
                        <span>
                        积分：{pts}
                    </span>
                </div>
                <div className='flex-space-between-align-center' style={{flex: '1',}}>
                    <span style={{flex: '1', textAlign: 'center',}}>{played}</span>
                    <span style={{flex: '1', textAlign: 'center',}}>{won}</span>
                    <span style={{flex: '1', textAlign: 'center',}}>{played - won - lost}</span>
                    <span style={{flex: '1', textAlign: 'center',}}>{lost}</span>
                    <span style={{flex: '2', textAlign: 'center',}}>{goals}/{against}</span>
                    <span style={{flex: '2', textAlign: 'center',}}>{diff}</span>
                </div>
            </div>
        </div>

    </>
}

const Rank = props => {

    const {
        table,
        home,
        away,
    } = props

    const allRank = table?.data?.all
    if (!allRank) return null
    const homeRank = allRank.find(team => team.team_id === home.id)
    const awayRank = allRank.find(team => team.team_id === away.id)

    const title = <WingBlank>
        <div className='flex-space-between-align-center'>
            <div className='game-room-analysis-title'>联赛积分</div>
        </div>
    </WingBlank>



    return <>
        <WhiteSpace/>
        {title}
        <WhiteSpace/>
        <div style={{padding: '16px 16px 0', background: '#fff',}}>
            {renderRank(home, homeRank)}
            <WhiteSpace />
            {renderRank(away, awayRank)}
            <div style={{textAlign: 'center', width: '100%', }}>
                <span style={{lineHeight: '40px',}}>查看更多</span>
            </div>
        </div>

        <WhiteSpace/>
    </>
}
export default Rank
